<div class="highlights-container">
    <div class="input-group panel panel-primary">
        <input ng-model="credentials.username" type="text" id="group_username" 
            ng-required="true" name="group_username" placeholder="Username" class="input-xlarge within-panel-login" />
        <input ng-model="credentials.password" type="password" id="group_password"
            ng-required="true" name="group_password" placeholder="Password" class="input-xlarge within-panel-login" />
        <button type="button" class="btn btn-default refresh" ng-click="addGroupUser()" style="margin: 5px">
            <span class="glyphicon glyphicon-plus"></span> Add User </button>
    </div>
    <h4>Group Members</h4>
    <div class="container">
        <div ng-repeat="user in users_group track by $index" class="interests-container">
            <div class="thumbnail interest-thumbnail"><img src="img/user.jpg" alt="user" class="thumbnail-img"/></div>
            <div class="interest-title">
                {{user.name}} - {{user.ctx.name}}
            </div>
        </div>
    </div>
    <div ng-show="users_group.length !== 0">
        <h4>
            Recommendations 
            <button type="button" class="btn btn-default refresh" ng-click="refreshGroupRecommendations()">
                <span class="glyphicon glyphicon-refresh"></span>
            </button>
        </h4>
        <div ng-repeat="video in all_group_recommendations track by $index" class="video-container">
            <img ng-src="{{posterURL(video[0])}}" alt="video" class="thumbnail" ng-click='watch(video[0])'/>
            <div>
                <div>
                    <progressbar class="progress-striped" value="video[1]" type="{{getType(video[1])}}">
                        {{video[1]}}%
                    </progressbar>
                </div>
                <div class="video-title">{{getShowName(video[0].title, 25)}}</div>
                <div class="video-metadata">about <span style="font-weight:bold">{{video[0].topic}}</span></div>
            </div>
            <br ng-show="($index+1)%4==0" />
        </div>
        <div ng-show="all_group_recommendations.length === 0">
            There are currently no recommendations. Try changing the recommendation preferences.
        </div>
    </div>
    <div ng-show="users_group.length === 0">
        Please add users to the group..
    </div>
</div>